<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常见的元素隐藏方式？</title>
<style type="text/css">
</style>
</head>
<body>
<pre>
99.css 实现上下固定中间自适应布局？
利用绝对定位实现body {
  padding: 0;
  margin: 0;
}

.header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  background: red;
}

.container {
  position: absolute;
  top: 100px;
  bottom: 100px;
  width: 100%;
  background: green;
}

.footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: red;
}

利用flex布局实现html,
body {
  height: 100%;
}

body {
  display: flex;
  padding: 0;
  margin: 0;
  flex-direction: column;
}

.header {
  height: 100px;
  background: red;
}

.container {
  flex-grow: 1;
  background: green;
}

.footer {
  height: 100px;
  background: red;
}
详细资料可以参考： <a href="https://www.jianshu.com/p/30bc9751e3e8" rel="nofollow">《css 实现上下固定中间自适应布局》</a>
</pre>
<script type="text/javascript">
</script>
</body>
</html>